// web/src/components/auth/new-password-form.tsx
'use client';
import React, {useState, useTransition} from 'react';
import {useForm} from "react-hook-form";
import * as z from "zod";
import {NewPasswordSchema} from "@/schemas";
import {zodResolver} from "@hookform/resolvers/zod";
import {reset} from "@/actions/reset";
import CardWrapper from "@/components/auth/card-wrapper";
import {Form, FormControl, FormField, FormItem, FormLabel, FormMessage} from "@/components/ui/form";
import {Input} from "@/components/ui/input";
import FormError from "@/components/form-error";
import FormSuccess from "@/components/form-success";
import {Button} from "@/components/ui/button";
import {useSearchParams} from "next/navigation";
import {newPassword} from "@/actions/new-password";


const NewPasswordForm = () => {
    const searchParams = useSearchParams()
    const token = searchParams.get('token')

    // 提交表单后的错误或成功信息
    const [error, setError] = useState<string | undefined>('')
    const [success, setSuccess] = useState<string | undefined>('')

    const [isPending, startTransition] = useTransition()

    const form = useForm<z.infer<typeof NewPasswordSchema>>({
        resolver: zodResolver(NewPasswordSchema),
        defaultValues: {
            password: '',
        }
    })

    const onSubmit = (values: z.infer<typeof NewPasswordSchema>) => {
        setError('')
        setSuccess('')

        // 可以获取是否执行中的状态
        startTransition(() => {
            newPassword(values, token)
                .then((data) => {
                    setError(data?.error)
                    setSuccess(data?.success)
                })
        })
    }

    return (
        <CardWrapper
            headerLabel={'Enter a new password'}
            backButtonLabel={`Back to login`}
            backButtonHref={`/auth/login`}
        >
            <Form {...form}>
                <form
                    onSubmit={form.handleSubmit(() => {
                        onSubmit(form.getValues())
                    })}
                    className="space-y-6"
                >
                    <div className={`space-y-4`}>
                        <FormField
                            control={form.control}
                            name="password"
                            render={({field}) => (
                                <FormItem>
                                    <FormLabel>Password</FormLabel>
                                    <FormControl>
                                        <Input
                                            {...field}
                                            disabled={isPending}
                                            placeholder="******"
                                            type="password"
                                        />
                                    </FormControl>
                                    <FormMessage/>
                                </FormItem>
                            )}
                        />
                    </div>
                    <FormError message={error}/>
                    <FormSuccess message={success}/>
                    <Button
                        type="submit"
                        disabled={isPending}
                        className={`w-full`}
                    >
                        Reset password
                    </Button>
                </form>
            </Form>
        </CardWrapper>
    );
};

export default NewPasswordForm